<template>
<div>
  <div class="tabNav">
   <router-link to="/index">
        <img src="../assets/img/sidebar1.png" />首页
    </router-link>
    <b>/<img src="../assets/img/service.png" />服务者列表</b>
  </div>
  <div class="task-box">
      <div class="nav" v-if="infos.plateMode === 1">
        <div class="nav-item" @click="getTableData(index)" v-for="(item, index) in navArr" :key="index" :class="[index == activeNav ? 'active' : '']">
          <span>{{ item }}</span>
          <div class="back"></div>
          <div class="back-active"></div>
        </div>
        <div class="animate-border" :style="{'left': 'calc('+ activeNav*150 +'px + 55px)'}"></div>
      </div>
      <div class="nav" style="width: 300px;" v-if="infos.plateMode !== 1">
        <div class="nav-item" @click="getTableData(index)" v-for="(item, index) in navArrs" :key="index" :class="[index == activeNav ? 'active' : '']">
          <span>{{ item }}</span>
          <div class="back"></div>
          <div class="back-active"></div>
        </div>
        <div class="animate-border" :style="{'left': 'calc('+ activeNav*150 +'px + 55px)'}"></div>
      </div>
    </div>
    <el-row :gutter="24">
        <el-col :span="24">
            <el-card class="cardTits cardTiti cardTitss cardTitdd table-drop" shadow="hover">
                <div class="search">
                  <el-input v-model="input" placeholder="服务者姓名/身份证号"></el-input>
                  <el-button type="primary" @click="getTableData(activeNav)">查询</el-button>
                  <!-- <el-button type="primary" class="excelDownload" @click="excelDownloads(activeNav)">下载</el-button> -->
                </div>
                <transition name="el-zoom-in-top">
                  <div class="download" v-show="checkboxSelect > 0">
                    <i class="el-icon-info"></i>
                    共{{ total }}项，已选择<b>{{ checkboxSelect }}</b
                    >项
                    <span @click="excelDownload(activeNav)">下载信息</span>
                    <span style="margin-left: 0" @click="excelDownloads(activeNav)">下载附件</span>
                    <em @click="cleanSelection">清空</em>
                  </div>
                </transition>
                <el-table
                :data="tableData"
                @selectionChange="downloadWhether"
                @selection-change="handleSelectionChange"
                stripe
                border
                :fit="true"
                style="width: 100%"
                ref="multipleTable"
                :row-key="getRowKeys"
                @sort-change="sortChange"
                >
                <el-table-column type="selection" :reserve-selection="true" width="45"> </el-table-column>
                <el-table-column prop="id" sortable="custom" align="center" label="ID" width="70"> </el-table-column>
                <el-table-column
                    prop="name"
                    sortable="custom"
                    align="center"
                    label="姓名"
                >
                </el-table-column>
                <el-table-column prop="username" sortable="custom" align="center" label="用户登录名" width="120">
                </el-table-column>
                <el-table-column prop="idcard" sortable="custom" min-width="160" align="center" label="身份证号">
                </el-table-column>
                <el-table-column prop="phone" sortable="custom" align="center" label="手机号" width="120">
                </el-table-column>
                <el-table-column v-if="activeNav != 3" sortable="custom" min-width="160" prop="createTime" align="center" label="注册时间">
                  <template #default="item">
                  {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.createTime)) }}
                  </template>
                </el-table-column>
                <el-table-column v-if="activeNav == 3" sortable="custom" min-width="160" prop="examineTime" align="center" label="驳回时间" width="">
                <template #default="item">
                  <template v-if="item.row.examineTime == null">-</template>
                  <template v-else>{{ format("yyyy-MM-dd hh:mm:ss", new Date(item.row.examineTime)) }}</template>
                </template>
              </el-table-column>
              <el-table-column v-if="activeNav == 3" min-width="160" prop="rejectCode" align="center" label="驳回原因" width="">
                <template #default="item">
                  <template v-if="item.row.rejectCode == null">--</template>
                  <template v-else>{{ $store.state.reasonsRejection[item.row.rejectCode] }}</template>
                </template>
              </el-table-column>
              <el-table-column
                v-if="activeNav == 3"
                prop="isBusiness"
                align="center"
                label="是否重新提交"
                min-width="120"
              >
                <template #default="item">
                  {{ item.row.isBusiness == 1 ? '是' : '否' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="isBusiness"
                align="center"
                label="是否完成注册"
                min-width="120"
              >
                <template #default="item">
                  {{ item.row.step == 4 ? '是' : '否' }}
                </template>
              </el-table-column>
                <!-- <el-table-column v-if="activeNav != 3" prop="isBusiness" align="center" min-width="150" label="是否办理个体工商户">
                  <template #default="item">
                    {{ item.row.isBusiness == 1 ? '是' : '否' }}
                  </template>
                </el-table-column> -->
                <el-table-column prop="bankName" min-width="100" label="银行名称"> </el-table-column>
                <el-table-column prop="bankNo" min-width="160" label="账号"> </el-table-column>
                <el-table-column prop="bankPhone" min-width="110" label="预留手机号"> </el-table-column>
                <el-table-column prop="bankCity" min-width="80" label="开户省"> </el-table-column>
                <el-table-column prop="bankProvince" min-width="80" label="开户市"> </el-table-column>
                <el-table-column prop="phone" align="center" label="授权委托书" width="120">
                  <template #default="item">
                    <span v-if="item.row.authAgreementUrl == null">-</span>
                    <el-button v-else class="open-crm" type="text" @click="openUrl(item.row.authAgreementUrl)">查看</el-button>
                    <span v-if="item.row.redoStatus&2 && item.row.selfMode == 1">(需更新)</span>
                  </template>
                </el-table-column>
                <el-table-column prop="phone" align="center" label="平台协议书" width="120">
                  <template #default="item">
                    <span v-if="item.row.platformAgreementUrl == null">-</span>
                    <el-button v-else class="open-crm" type="text" @click="openUrl(item.row.platformAgreementUrl)">查看</el-button>
                    <span v-if="item.row.redoStatus&1">(需更新)</span>
                  </template>
                </el-table-column>
                <el-table-column prop="phone" align="center" label="意愿视频" width="120">
                  <template #default="item">
                    <template v-if="linggonginfo.showWishVideo == 1">
                      <span v-if="item.row.wishVideoUrl == null">-</span>
                      <el-button v-else class="open-crm" type="text" @click="openVideo(item.row.wishVideoUrl)">查看</el-button>
                      <span v-if="item.row.redoStatus&4">(需更新)</span>
                    </template>
                    <template v-else>-</template>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="caozuo"
                    label="操作"
                    width="530"
                    class-name="editor"
                >
                  <template #default="item">
                    <el-button type="text" @click="getBusinessList(item.row.selfBusinessId)">详情</el-button>
                    <el-button type="text" @click="againAgreementAlerts(item.row)">关注企业列表</el-button>
                    <el-button type="text" @click="againAgreementAlert(item.row)">重新签署协议</el-button>
                    <template v-if="linggonginfo.showWishVideo == 1">
                      <el-button type="text" v-if="item.row.redoStatus&4" @click="againAgreement(item.row.id, -4)">取消重新录制意愿视频</el-button>
                      <el-button type="text" v-else @click="againAgreement(item.row.id, 4)">重新录制意愿视频</el-button>
                    </template>
                    <el-button type="text" v-if="item.row.redoStatus&8" @click="againAgreement(item.row.id, -8)">取消重新上传身份证</el-button>
                    <el-button type="text" v-else @click="againAgreement(item.row.id, 8)">重新上传身份证</el-button>
                  </template>
                </el-table-column>
                </el-table>
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="arrPage"
                :page-size="selectPage"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                >
                </el-pagination>
                <el-dialog title="服务者详情" v-model="businessListShow" custom-class="examine-style" width="70%">
                  <div class="modifyPassword">
                      <div class="details-box">
                        <el-divider></el-divider>
                      <div class="details-title">服务者信息</div>
                      </div>
                      <div class="details-table" v-if="infos.plateMode === 1">
                        <el-row>
                          <el-col :span="4">
                            <div class="box-col col-title">姓名</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{selfBusinessPo.legalName}}</div>
                          </el-col>
                          <el-col :span="4">
                            <div class="box-col col-title">手机号</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{selfBusinessPo.legalPhone}}</div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="4">
                            <div class="box-col col-title">银行名称</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{selfBusinessPo.bankName}}</div>
                          </el-col>
                          <el-col :span="4">
                            <div class="box-col col-title">银行卡号</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{selfBusinessPo.bankNo}}</div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="4">
                            <div class="box-col col-title img-height">身份证正面照片</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content img-height">
                              <el-image
                                style="width: 160px; height: 80px"
                                :src="selfBusinessPo.idCardFrondUrl"
                                :preview-src-list="[selfBusinessPo.idCardFrondUrl]">
                              </el-image>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="box-col col-title img-height">身份证反面照片</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content img-height">
                              <el-image
                                style="width: 160px; height: 80px"
                                :src="selfBusinessPo.idCardBackUrl"
                                :preview-src-list="[selfBusinessPo.idCardBackUrl]">
                              </el-image>
                            </div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="4">
                            <div class="box-col col-title img-height">营业执照</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content img-height">
                              <span v-if="selfBusinessPo.licenseUrl == null">-</span>
                              <el-image
                                v-else
                                style="width: 160px; height: 80px"
                                :src="selfBusinessPo.licenseUrl"
                                :preview-src-list="[selfBusinessPo.licenseUrl]">
                              </el-image>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="box-col col-title img-height">意愿认证视频</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content img-height">
                              <!-- <el-image
                                style="width: 160px; height: 80px"
                                :src="kbSelfBusinessPo.linkIdcardBackUrl"
                                :preview-src-list="[kbSelfBusinessPo.linkIdcardBackUrl]">
                              </el-image> -->
                              <span v-if="selfBusinessPo.wishVideoUrl == ''">-</span>
                              <el-link v-else type="primary" href="javascript:void(0)" @click="openVideo(selfBusinessPo.wishVideoUrl)">查看意愿视频</el-link>
                            </div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="4">
                            <div class="box-col col-title">审核附件</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">
                              <span>-</span>
                              <!-- <span v-if="sevicerPo.platformAgreementUrl == null">--</span> -->
                              <!-- <el-link v-else type="primary" href="javascript:void(0)" @click="openUrl(sevicerPo.authAgreementUrl)">查看附件</el-link> -->
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="box-col col-title">平台协议书</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">
                              <template v-if="selfBusinessPo.platformUrl == null">-</template>
                              <el-link v-else type="primary" href="javascript:void(0)" @click="openUrl(selfBusinessPo.platformUrl)">查看平台协议书</el-link>
                            </div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="4">
                            <div class="box-col col-title">身份证号</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{selfBusinessPo.legalIdcard}}</div>
                          </el-col>
                          <el-col :span="4">
                            <div class="box-col col-title">授权委托书</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">
                              <template v-if="selfBusinessPo.agreementUrl == null">-</template>
                              <el-link v-else type="primary" href="javascript:void(0)" @click="openUrl(selfBusinessPo.agreementUrl)">查看授权委托书</el-link>
                            </div>
                          </el-col>
                        </el-row>
                      </div>
                      <div class="details-table" v-if="infos.plateMode !== 1">
                        <el-row>
                          <el-col :span="4">
                            <div class="box-col col-title">姓名</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{selfBusinessPo.legalName}}</div>
                          </el-col>
                          <el-col :span="4">
                            <div class="box-col col-title">手机号</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{selfBusinessPo.legalPhone}}</div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="4">
                            <div class="box-col col-title">银行名称</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{selfBusinessPo.bankName}}</div>
                          </el-col>
                          <el-col :span="4">
                            <div class="box-col col-title">银行卡号</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{selfBusinessPo.bankNo}}</div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="4">
                            <div class="box-col col-title img-height">身份证正面照片</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content img-height">
                              <el-image
                                style="width: 160px; height: 80px"
                                :src="selfBusinessPo.idCardFrondUrl"
                                :preview-src-list="[selfBusinessPo.idCardFrondUrl]">
                              </el-image>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="box-col col-title img-height">身份证反面照片</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content img-height">
                              <el-image
                                style="width: 160px; height: 80px"
                                :src="selfBusinessPo.idCardBackUrl"
                                :preview-src-list="[selfBusinessPo.idCardBackUrl]">
                              </el-image>
                            </div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="4">
                            <div class="box-col col-title">审核附件</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">
                              <span>-</span>
                              <!-- <span v-if="sevicerPo.platformAgreementUrl == null">--</span> -->
                              <!-- <el-link v-else type="primary" href="javascript:void(0)" @click="openUrl(sevicerPo.authAgreementUrl)">查看附件</el-link> -->
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="box-col col-title">平台协议书</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">
                              <template v-if="selfBusinessPo.platformUrl == null">-</template>
                              <el-link v-else type="primary" href="javascript:void(0)" @click="openUrl(selfBusinessPo.platformUrl)">查看平台协议书</el-link>
                            </div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="4">
                            <div class="box-col col-title">身份证号</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{selfBusinessPo.legalIdcard}}</div>
                          </el-col>
                        </el-row>
                      </div>
                    </div>
                  <template #footer>
                  <span class="dialog-footer">
                      <el-button @click="businessListShow = false">取 消</el-button>
                      <el-button type="primary" @click="businessListShow = false">确 定</el-button>
                  </span>
                  </template>
                </el-dialog>
            </el-card>
        </el-col>
    </el-row>
    <!-- 关注企业列表 -->
    <el-dialog
      title="关注企业列表"
      custom-class="examine-style"
      v-model="againAgreementAlertss"
      width="60%"
    >
      <div class="cardTits">
        <el-table :data="weiguanzhu" ref="multipleTable" stripe style="width: 100%">
          <el-table-column prop="name" label="企业名称">
          </el-table-column>
          <el-table-column prop="socialCreditCode" label="统一社会信用代码">
          </el-table-column>
          <el-table-column prop="attentionTime" label="关注时间">
            <template #default="item">
              {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.attentionTime)) }}
            </template>
          </el-table-column>
          <el-table-column prop="examineStatus" label="审核状态">
            <template #default="item">
              {{item.row.examineStatus == 0 ? "待审核" : "已关注"}}
            </template>
          </el-table-column>
          <el-table-column prop="examineTime" label="审核时间">
            <template #default="item">
              <span v-if="item.row.examineTime == null || item.row.examineTime == ''">-</span>
              <span v-else>{{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.examineTime)) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <el-dialog
      title="签署协议"
      v-model="againAgreementVisible"
      width="420px">
        <div class="againAgreement-box">
          <button class="againAgreement-button" v-if="selfMode == 1" @click="againAgreement(serviceId, agreementStatus)" type="button">{{agreementText}}</button>
          <button class="againAgreement-button" @click="againAgreement(serviceId, platformStatus)" type="button">{{platformText}}</button>
        </div>
    </el-dialog>
</div>  
</template>
<script>
import axios from "axios";
export default {
  props: ['search'],
  data() {
    return {
      getRowKeys(row) {
        // 获取row的key值
        return row.id;
      },
      selfMode: 1,
      linggonginfo: JSON.parse(localStorage.getItem("linggong_info")),
      infos: JSON.parse(localStorage.getItem("linggong_info")),
      // infos: {
      //   plateMode: 1
      // },
      serviceId: 0,
      weiguanzhu: [],
      agreementText: "重新签署授权书",
      agreementStatus: 2,
      platformText: "重新签署平台协议书",
      platformStatus: 1,
      againAgreementVisible: false,
      againAgreementAlertss: false,
      orderByZH: false,
      orderByAsc: false,
      orderByColume: 'createTime',
      navArr: ['全部', '未办理个体工商户', '已办理个体工商户','被驳回'],
      navArrs: ['全部','被驳回'],
      activeNavItem: {
        0: 0,
        1: 1,
        2: 3,
        3: 4
      },
      activeNavItems: {
        0: 0,
        1: 4
      },
      paymentStatuts: {
        1: "意愿视频无效",
      },
      activeNav: 0,
      businessListShow: false,
      tableData: [],
      kbSelfBusinessPo: [],
      sevicerPo: [],
      selfBusinessPo: {},
      input: '',
      currentPage: 1,
      total: 0, // 总条数
      arrPage: [10, 20], // 每页条数
      selectPage: 10, // 每页选中条数
			dwonloadList: [], // 选中的数据
      checkboxSelect: 0, // 选中条数
      processStatus1: 0,
    };
  },
  created() {
    this.getTableData(0);
  },
  methods: {
    excelDownload(index) {
      // 下载信息
      if (this.activeNav != index) {
          this.orderByColume = 'createTime'
      }
      this.activeNav = index;
      let info = JSON.parse(localStorage.getItem("linggong_info"))
      let datas = {
          processStatus: this.activeNavItem[this.activeNav],
          mixedStr: this.input,
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
      };
      for(let i=0;i<this.dwonloadList.length;i++){
        if(datas['idList']){
          datas['idList'].push(this.dwonloadList[i].id)
        }else{
          datas['idList']=[this.dwonloadList[i].id]
        } 
      }
      axios({
        method: "POST",
        url: "/api/quick/server/consumer/downSevcierList",
        data: datas,
        responseType: "blob",
        headers: {
          "Content-Type": "application/json",
          // "businessId": info.businessId,
          // "businessNo": info.businessNo,
          "platformId": info.platformId,
          "platformNo": info.platformNo,
          "businessType": 4,
          Authorization: localStorage.getItem("linggong_token")
        }
      })
        .then((res) => {
          const blob = new Blob([res.data]);
          const downloadElement = document.createElement("a");
          const href = window.URL.createObjectURL(blob);
          //后台再header中传文件名
          downloadElement.href = href;
          downloadElement.download = "服务者列表"+ this.format("yyyyMMddhhmmss", new Date()) +".xlsx";
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement); // 下载完成移除元素
          window.URL.revokeObjectURL(href); // 释放掉blob对象
        })
        .catch((err) => {
          console.log(err);
        });
    },
    excelDownloads(index) {
      if(this.tableData.length <= 0){
        this.$message.success("无下载数据");
      }else {
        // 下载
        if (this.activeNav != index) {
            this.orderByColume = 'createTime'
        }
        this.activeNav = index;
        let info = JSON.parse(localStorage.getItem("linggong_info"))
        let loginUserName = localStorage.getItem("ms_username");
        let datas = {
            fileRes: '10004',
            loginUserName: loginUserName,
            fileName: "服务者信息附件" + this.format("yyyyMMddhhmmss", new Date()), // 是否正序
            excelFileName: "服务者信息附件"+ this.format("yyyyMMddhhmmss", new Date()),
            selfBusinessReqDto: {
              processStatus: this.activeNavItem[this.activeNav],
              mixedStr: this.input,
            },
        };
        for(let i=0;i<this.dwonloadList.length;i++){
          if(datas['idList']){
            datas['idList'].push(this.dwonloadList[i].id)
          }else{
            datas['idList']=[this.dwonloadList[i].id]
          } 
        }
        axios({
          method: "POST",
          url: "/api/quick/download/downloadSevicerAnnex",
          data: datas,
          headers: {
            'Content-Type': 'application/json',
            // "businessId": info.businessId,
            // "businessNo": info.businessNo,
            "platformId": info.platformId,
            "platformNo": info.platformNo,
            "content-type": "application/json;charset=UTF-8",
            "businessType": 4,
            Authorization: localStorage.getItem("linggong_token"),
          }
        })
        .then(() => {
          this.$message.success("已添加至下载列表，请到下载列表中查看下载");
        })
        .catch((err) => {
          this.$message.error(err);
        });
      }
    },
    getTableData(index) {
      if (this.activeNav != index) {
          this.orderByColume = 'createTime'
      }
      this.activeNav = index;
      this.processStatus1 = this.activeNavItem[this.activeNav]
      if(this.infos.plateMode !== 1){
        this.processStatus1 = this.activeNavItems[this.activeNav]
      }
      // 获取列表信息
      this.$http({
        url: "/api/quick/server/consumer/selectSevcierList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          processStatus: this.processStatus1,
          // processStatus: this.activeNavItem[this.activeNav],
          mixedStr: this.input,
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code === 0) {
          this.total = data.result.total;
          this.tableData = data.result.list;
        }
      });
    },
    handleSizeChange(val) {
      // 切换每页条数调用
      this.selectPage = val;
      this.getTableData(this.activeNav);
    },
    handleCurrentChange(val) {
      // 切换当前页数调用
      this.currentPage = val;
      this.getTableData(this.activeNav);
    },
    handleSelectionChange() {},
    openUrl(url) {
      // 打开新窗口查看pdf
      this.$http({
        url: "/api/quick/server/consumer/pdfPreView",
        method: "post",
        params: {
          ossPath: url
        },
        responseType: 'blob'
      }).then((data) => {
        const blob = new Blob([data]);
        const href = window.URL.createObjectURL(blob)
        window.open('/pdfjs/web/viewer.html?file=' + encodeURIComponent(href))
      });
    },
    openVideo(url) {
      // 查看视频
      this.$alert('<video width="400" controls height="300" src="' + url +'"></video>', {
        dangerouslyUseHTMLString: true,
        showConfirmButton: false,
        center: true,
        customClass: "seeVideo"
      })
    },
    getBusinessList(id) {
      this.businessListShow = true;
      // this.$http({
      //   url: "/api/quick/attention/selectAttentionDetail",
      //   method: "post",
      //   headers: {
      //     "Content-Type": "application/json",
      //     "businessId": -1
      //   },
      //   data: {
      //   "selfBusinessId": id
      // },
      // }).then((data) => {
      //   if (data.code === 0) {
      //     this.kbSelfBusinessPo = data.result.kbSelfBusinessPo;
      //     this.sevicerPo = data.result.sevicerPo;
      //   }
      // });
      this.$http({
        url: "/api/quick/oem/selfBusiness/getSelfInfo?businessId=" + id,
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
      }).then((data) => {
        if (data.code === 0) {
          this.selfBusinessPo = data.result
          // this.tableData = data.result;
        }
      });
    },
    sortChange(d) {
      // 监听排序
      if(d.prop == null) {
        // 默认排序方式
        this.orderByZH = false
        this.orderByAsc = false
        this.orderByColume = 'createTime'
      }else {
        let orderByZH = false
        if(d.prop == "name" || d.prop == 'examineTime') {
          orderByZH = true
        }
        this.currentPage = 1
        this.selectPage = 10
        let orderByAsc = d.order == "descending" ? false : true
        this.orderByZH = orderByZH
        this.orderByAsc = orderByAsc
        this.orderByColume = d.prop
      }
      this.getTableData(this.activeNav)
    },
    againAgreementAlert(d) {
      // 重新签署协议
      if(d.redoStatus&2) {
        this.agreementText = '取消重新签署授权书'
        this.agreementStatus = -2
      }else {
        this.agreementText = '重新签署授权书'
        this.agreementStatus = 2
      }
      if(d.redoStatus&1) {
        this.platformText = '取消重新签署平台协议书'
        this.platformStatus = -1
      }else {
        this.platformText = '重新签署平台协议书'
        this.platformStatus = 1
      }
      this.serviceId = d.id
      this.selfMode = d.selfMode
      this.againAgreementVisible = true
    },
    againAgreementAlerts() {
      // 关注企业列表
      this.againAgreementAlertss = true
      this.$http({
        url: "/api/quick/server/consumer/followList",
        method: "post",
        headers: {
          // "businessId": d.selfBusinessId,
          "Content-Type": "application/json",
        }
      }).then((data) => {
        if (data.code == 0) {
          this.weiguanzhu = data.result
        }
      });
    },
    downloadWhether(d) {
      this.checkboxSelect = d.length;
      this.dwonloadList = d;
      let checkSelect = new FormData();
      // let getTime = new Date().getTime()
      for (let i = 0; i < this.dwonloadList.length; i++) {
        checkSelect.append("selfIdList", this.dwonloadList[i].id);
      }
      var convert_FormData_to_json = function (formData) {
        var objData = {};
        
        for (var entry of formData.entries()){
            objData[entry[0]] = entry[1];
        }
        return JSON.stringify(objData);
      };
      console.log(checkSelect)
      // console.log(this.dwonloadList.length)
      console.log(convert_FormData_to_json(checkSelect));
    },
    cleanSelection() {
      // 清空选择
      this.$refs.multipleTable.clearSelection();
    },
    againAgreement(id, status) {
      // 更改意愿视频 协议状态 是否需要更新
      this.$http({
        url: "/api/quick/server/consumer/updateRedoStatus",
        method: "post",
        params: {
          id: id,
          redoStatus: status
        },
      }).then((data) => {
        if(data.code == 0) {
          this.$message.success("操作成功")
          this.againAgreementVisible = false
          this.getTableData(this.activeNav)
        }
      });
    }
  },
};
</script>
<style>
.cardTiti .el-card {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border: 0;
}
</style>
<style lang="scss" scoped>
.el-dialog__body {
  padding-top: 0;
}
.task-box {
  .nav {
    background-color: #e1e9f2;
    color: #6c8198;
    overflow: hidden;
    width: 600px;
    position: relative;
    .animate-border {
      width: 40px;
      height: 3px;
      background-color: #326CF0;
      border-radius: 2px;
      position: absolute;
      z-index: 4;
      bottom: 2px;
      transition: left .5s;
      left: 60px;
    }
    .nav-item {
      width: 150px;
      height: 40px;
      text-align: center;
      position: relative;
      line-height: 40px;
      float: left;
      cursor: pointer;
      font-size: 14px;
      span {
        z-index: 2;
        position: relative;
      }
      .back {
        transform: skew(20deg);
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: -1;
        background-color: #FFFFFF;
        border-radius: 2px;
      }
    }
    .nav-item.active:first-child {
      .back-active {
        background-color: #FFFFFF;
        width: 70px;
        height: 40px;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
    .nav-item.active:nth-last-child(2) {
      .back-active {
        background-color: #FFFFFF;
        width: 70px;
        height: 40px;
        position: absolute;
        right: 0;
        top: 0;
      }
    }
    .nav-item.active {
      span {
        color: #326CF0;
      }
      .back {
        z-index: 1;
      }
    }
  }
}
.againAgreement-box {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  .againAgreement-button {
    padding: 8px 16px;
    background-color: #326CF0;
    color: #fff;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
  }
}
</style>
